<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>添加银行卡</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/all.css" />
		<link rel="stylesheet" href="css/add-bank-card.css" />
	</head>
	<style type="text/css">
		.bank {
			position: absolute;
			width: 100%;
			bottom: 0;
			background: #fff;
		}
		
		.bank-iocn {
			display: inline-block;
			vertical-align: middle;
			margin: -0.14rem .2rem 0 .3rem;
		}
		
		.bank-two {
			width: 100%;
			height: .98rem;
			border-bottom: .01rem solid #ddd;
			line-height: .98rem;
		}
		
		.modal{
			position: fixed;
		    left: 0;
		    right: 0;
		    top: 0;
		    bottom: 0;
		    display: none;
		    background: rgba(0,0,0,0.3);
		    z-index: 9999;
		}
	</style>

	<body>
		<div>
			<div class="heads">
			 
					<span href="javascript:;" onclick="go()"><img src="img/zuojiantou.png" alt="" class="arrows"></span>
				 
				<h1 class="titles">添加银行卡</h1>
			</div>
			<div class="middle">
				<div class="messages">
					<p class="message">请填写您本人的银行卡信息</p>
				</div>
				<div class="name">
					<span class="names">持卡人</span>
					<!--<span class="name-one">张三</span>-->
					<input type="text" placeholder="请输入持卡人姓名" class="resetUpwd-out" id="card-name" />
				</div>
				<div>
					<form action="">
						<div class="resetUpwd-three">
							<span class="names">卡号</span>
							<input type="text" placeholder="请输入银行卡号" class="resetUpwd-out" id="card-number" />
						</div>
					</form>
				</div>
				<div class="name">
					<div id="select-bank">
						<span class="names">银行</span>
						<span class="name-one">请选择所属银行</span>
						<img src="img/jiantou.png" alt="" class="arrow">
					</div>
				</div>
			</div>
			<div class="selects">
				<input type="checkbox" class="select"><span class="select-one">同意《用户协议》</span>
			</div>
			<div>
				<div class="submit">
					<button class="submits">确定</button>
				</div>
			</div>
			<div class="modal">
				<div class="bank" id="hidden">
					<!--<div class="bank-two">
						<img class="bank-iocn" src="img/youzheng.png" alt="">
						<span class="bank-name">邮政银行</span>
					</div>
					<div class="bank-two">
						<img class="bank-iocn" src="img/gongshang.png" alt="">
						<span class="bank-name">工商银行</span>
					</div>-->
				</div>
			</div>
		</div>
		</div>
		
		<script src="js/jquery.js"></script>
		<script src="js/x_rem.js"></script>
		<script src="js/secondLevel.js"></script>
		<script src="js/all.js"></script>
		<script type="text/javascript">
			var bankId ="";   //银行ID
			 
			
			//请求可以绑定的银行
			$.ajax({
				type: "post",
				url: Url + "/bankCard/searchBankType",
				xhrFields: {
					withCredentials: true
				},
				data: {
					page: "1",
					rows: "100"
				},
				success: ((data) => {
					var html = "";
					for(let i = 0; i < data.rows.length; i++) {
						console.log(data.rows[i]);
						html += `
							<div class="bank-two" data-id="${data.rows[i].bankTypeId}">
								<img class="bank-iocn" src="${data.rows[i].picture}" alt="">
								<span class="bank-name">${data.rows[i].bankName}</span>
							</div>
						`
					}
					$(".bank").html(html);

				}),
				error: ((err) => {
					console.log(err);
				})
			});

			//点击选择银行    .bank显示
			$("#select-bank").click(() => {
				$(".modal").css('display', 'block'); //显示
			})


			$(".bank").on("click",".bank-two",function(){
				bankId = $(this).attr("data-id");    //获取银行的ID
				var bankName = $(this).children(".bank-name").text()
				$("#select-bank .name-one").text(bankName)   //获取银行名称
	
				$(".modal").css('display', 'none');
			})




			$(".submits").click(() => {
///^([1-9]{1})(\d{14}|\d{18})$/
				if($("#card-name").val() == ""){
					popup("请传入持卡人姓名");
				}else if(!vali("#card-number", /^([1-9]{1})(\d{14}|\d{18})$/ , "请传入正确的银行卡格式")){
					
				}else if(bankId == ""){
					popup("请选择银行卡所属银行");
				}else{
					
					$.ajax({
						type: "post",
						url: Url + "/bankCard/addBankCard",
						xhrFields: {
							withCredentials: true
						},
						data: {
							"bankTypeId": bankId,
							"cardNum": $("#card-number").val(),
							"name": $("#card-name").val()
						},
						success: ((data) => {
							console.log(data);
							popup(data.message);
						}),
						error: ((err) => {
							console.log(err);
						})
					});
						
					
				}


				

			})
		</script>
	</body>

</html>